<template>
	<div class="wrapper">
		<title-decorate titleName="供水概况"/>
		<p class="hint-text">数据更新于{{ end_time }}</p>
		<div class="yield-weater-situation">
			<div class="day-yield-weater">
				<span>当日供水量(m³)</span>
				<span id="curDayYieldWeater">{{
						formatter(weater.curDayYieldWeater)
					}}</span>
			</div>
			<div class="month-yield-weater">
				<span>当月供水量(m³)</span>
				<span id="curMonthYieldWeater">{{
						formatter(weater.curMonthYieldWeater)
					}}</span>
			</div>
		</div>
	</div>
</template>

<script>
import TitleDecorate from "../../components/TitleDecorate.vue";
import {numberRollingstart, thousandSeparator} from "../../commonjs/rollingNumber.js"

import {BigScreen} from "../../datastore/BigScreen";

export default {
	components: {TitleDecorate},
	props: {},
	data() {
		return {
			end_time: '2021年12月9日',
			weater: {
				curDayYieldWeater: 3600,
				curMonthYieldWeater: 43000,
			},
		};
	},
	watch: {
		weater: {
			deep: true,
			handler(newVar) {
				numberRollingstart(newVar.curDayYieldWeater, "curDayYieldWeater", 200);
				numberRollingstart(newVar.curMonthYieldWeater, "curMonthYieldWeater", 200);
			},
		},
	},
	computed: {},
	methods: {
		/**
		 * 格式化千位分隔符
		 */
		formatter: thousandSeparator,
	},
	mounted() {
		var that = this;
		new BigScreen(this).getWaterTotal({},(res)=>{
			that.end_time = res.datas.end_time;
			that.weater.curDayYieldWeater = res.datas.today_water_total;
			that.weater.curMonthYieldWeater = res.datas.month_water_total;
		})
	},
};
</script>
<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;

	.hint-text {
		color: #ffffffa6;
		font-size: 12px;
		padding: 10px 0 0;
		margin: 0;
	}

	.yield-weater-situation {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;

		.day-yield-weater {
			display: flex;
			flex-direction: column;
			width: 180px;

			span:nth-child(1) {
				font-size: 14px;
			}

			span:nth-child(2) {
				padding-top: 15px;
				box-sizing: border-box;
				font-family: "lyndon";
				font-size: 36px;
				line-height: 22px;
				text-shadow: 0px 1px 2px rgba(140, 101, 0, 0.1);
				background: linear-gradient(180deg, #fee7cb 0%, #ffd666 100%);
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.month-yield-weater {
			display: flex;
			flex-direction: column;
			width: 180px;

			span:nth-child(1) {
				font-size: 14px;
			}

			span:nth-child(2) {
				padding-top: 15px;
				box-sizing: border-box;
				font-family: "lyndon";
				font-size: 36px;
				line-height: 22px;
				text-shadow: 0px 1px 2px rgba(140, 101, 0, 0.1);
				background: linear-gradient(180deg, #fecbb2 0%, #f17130 100%);
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
}
</style>